import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import storage from '../../../utils/localStorage';

import Button from '../../Button';
import Checkbox from '../../Checkbox';
import Dropdown, { type DropdownOption } from '../../Dropdown';

import i18n from '../../../i18n';
import { useMutation, useQuery } from '@tanstack/react-query';
import { settingsQuery } from '@renderer/queries/settings';
import { queryClient } from '@renderer/index';

const automaticallySaveLyricsOptions: DropdownOption<AutomaticallySaveLyricsTypes>[] = [
  {
    label: i18n.t('settingsPage.doNotSaveLyricsAutomatically'),
    value: 'NONE'
  },
  { label: i18n.t('settingsPage.syncedLyricsOnly'), value: 'SYNCED' },
  {
    label: i18n.t('settingsPage.saveEitherLyrics'),
    value: 'SYNCED_OR_UN_SYNCED'
  }
];

const LyricsSettings = () => {
  const { data: userSettings } = useQuery(settingsQuery.all);

  const { t } = useTranslation();

  const [lyricsAutomaticallySaveState, setLyricsAutomaticallySaveState] =
    useState<AutomaticallySaveLyricsTypes>('NONE');

  const { mutate: updateSaveLyricsInLrcFilesForSupportedSongs } = useMutation({
    mutationFn: (enableSave: boolean) =>
      window.api.settings.updateSaveLyricsInLrcFilesForSupportedSongs(enableSave),
    onSettled: () => {
      queryClient.invalidateQueries(settingsQuery.all);
    }
  });

  const { mutate: updateCustomLrcFilesSaveLocation } = useMutation({
    mutationFn: (location: string) =>
      window.api.settings.updateCustomLrcFilesSaveLocation(location),
    onSettled: () => {
      queryClient.invalidateQueries(settingsQuery.all);
    }
  });

  useEffect(() => {
    const lyricsSaveState = storage.preferences.getPreferences('lyricsAutomaticallySaveState');

    setLyricsAutomaticallySaveState(lyricsSaveState);
  }, []);

  const [autoTranslateLyrics, setAutoTranslateLyrics] = useState(false);

  useEffect(() => {
    const autoTranslateLyrics = storage.preferences.getPreferences('autoTranslateLyrics');

    setAutoTranslateLyrics(autoTranslateLyrics);
  }, []);

  const [autoConvertLyrics, setAutoConvertLyrics] = useState(false);

  useEffect(() => {
    const autoConvertLyrics = storage.preferences.getPreferences('autoConvertLyrics');

    setAutoConvertLyrics(autoConvertLyrics);
  }, []);

  return (
    <li
      className="main-container audio-playback-settings-container mb-16"
      id="audio-playback-settings-container"
    >
      <div className="title-container text-font-color-highlight dark:text-dark-font-color-highlight mt-1 mb-4 flex items-center text-2xl font-medium">
        <span className="material-icons-round-outlined mr-2">notes</span>
        {t('settingsPage.lyrics')}
      </div>
      <ul className="marker:bg-font-color-highlight dark:marker:bg-dark-font-color-highlight list-disc pl-6">
        <li className="save-lyrics-automatically mb-4">
          <div className="description">{t('settingsPage.saveLyricsAutomaticallyDescription')}</div>
          <div className="mt-4 flex flex-row items-center">
            <Dropdown
              name="lyricsAutomaticallySaveState"
              value={lyricsAutomaticallySaveState}
              options={automaticallySaveLyricsOptions}
              onChange={(e) => {
                const val = e.currentTarget.value as AutomaticallySaveLyricsTypes;
                setLyricsAutomaticallySaveState(val);
                storage.preferences.setPreferences('lyricsAutomaticallySaveState', val);
              }}
            />
            <span
              className="material-icons-round-outlined text-font-color-highlight dark:text-dark-font-color-highlight ml-4 cursor-pointer text-2xl"
              title={t('settingsPage.saveLyricsAutomaticallyInfo')}
            >
              help
            </span>
          </div>
        </li>

        <li className="secondary-container always-save-lrc-files mb-4">
          <div className="description">{t('settingsPage.saveLyricsInLrcFilesDescription')}</div>
          <Checkbox
            id="saveLyricsInLrcFilesForSupportedSongs"
            isChecked={
              userSettings !== undefined && userSettings.saveLyricsInLrcFilesForSupportedSongs
            }
            checkedStateUpdateFunction={(state) =>
              updateSaveLyricsInLrcFilesForSupportedSongs(state)
            }
            labelContent={t('settingsPage.saveLyricsInLrcFiles')}
          />
        </li>

        <li className="lrc-files-custom-save-location mb-4">
          <div className="description">
            {t('settingsPage.lrcFileCustomSaveLocationDescription')}
          </div>
          <div className="mt-4 ml-2 flex-row text-sm">
            {userSettings?.customLrcFilesSaveLocation && (
              <>
                <span>{t('settingsPage.selectedCustomLocation')}: </span>
                <span className="text-font-color-highlight dark:text-dark-font-color-highlight mr-4">
                  {userSettings.customLrcFilesSaveLocation}
                </span>
              </>
            )}
          </div>
          <div className="mt-4 flex flex-row items-center">
            <Button
              label={t('settingsPage.setCustomLocation')}
              iconName="location_on"
              iconClassName="material-icons-round-outlined"
              clickHandler={() =>
                window.api.settingsHelpers
                  .getFolderLocation()
                  .then((folderPath) => updateCustomLrcFilesSaveLocation(folderPath))
                  .catch((err) => console.warn(err))
              }
            />
          </div>
        </li>

        <li className="secondary-container auto-translate-lyrics mb-4">
          <div className="description">{t('settingsPage.autoTranslateLyricsDescription')}</div>
          <Checkbox
            id="autoTranslateLyrics"
            isChecked={autoTranslateLyrics}
            checkedStateUpdateFunction={(state) => {
              setAutoTranslateLyrics(state);
              storage.preferences.setPreferences('autoTranslateLyrics', state);
            }}
            labelContent={t('settingsPage.autoTranslateLyrics')}
          />
        </li>

        <li className="secondary-container auto-convert-lyrics mb-4">
          <div className="description">{t('settingsPage.autoConvertLyricsDescription')}</div>
          <Checkbox
            id="autoConvertLyrics"
            isChecked={autoConvertLyrics}
            checkedStateUpdateFunction={(state) => {
              setAutoConvertLyrics(state);
              storage.preferences.setPreferences('autoConvertLyrics', state);
            }}
            labelContent={t('settingsPage.autoConvertLyrics')}
          />
        </li>
      </ul>
    </li>
  );
};

export default LyricsSettings;
